@import "../../assets/scss/core/base";

.jigsaw-notification-host {
    z-index: $zindex-popover-level-1 !important;
}

.jigsaw-notification {
    border-radius: $border-radius-base;
    background: $component-background;
    box-shadow: $box-shadow-base;
    padding: 18px 22px 18px 18px;
    height: 100%;
    overflow: hidden;

    .jigsaw-notification-content {
        display: flex;

        .jigsaw-notification-icon {
            flex-grow: 0;
            font-size: 44px;
            margin-right: 11px;
        }

        .jigsaw-notification-text {
            flex-grow: 1;
            width: calc(100% - 94px);

            .jigsaw-notification-caption {
                @include line-ellipsis-style;
                font-size: $font-size-lg+1px;
                color: $heading-color-dark;
                margin-bottom: 6px;
            }

            .jigsaw-notification-message {
                word-wrap: break-word;
                font-size: $font-size-base;
                color: $text-color;
            }
        }
    }

    .jigsaw-notification-close {
        position: absolute;
        left: calc(100% - 20px);
        top: 0;
        span {
            cursor: pointer;
            font-size: 18px;
        }
    }

    .jigsaw-notification-button-bar {
        text-align: right;
        flex: none;
        margin: 18px -8px -6px 0;

        jigsaw-button {
            margin-left: 6px;
        }
    }
}
